<template>
  <div>
    <a-row type="flex" justify="start">
      <a-col :span="4">
        <a-button type="primary" @click="handleSaveMenuModalShow('新增菜单', null)">
          新增菜单
        </a-button>
      </a-col>
    </a-row>
    <a-row type="flex" justify="start">
      <a-col :span="4">
        <a-input v-model:value="menuQuery.name" placeholder="菜单名称" />
      </a-col>
      <a-col :span="4">
        <a-input v-model:value="menuQuery.code" placeholder="菜单code" />
      </a-col>
      <a-col :span="4">
        <a-button type="primary" @click="onQuery">搜一搜</a-button>
      </a-col>
    </a-row>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :row-key="(record) => record.id"
      :pagination="false"
    >
      <template #operation="{ record }">
        <a-button type="primary" ghost @click="handleSaveMenuModalShow('编辑菜单', record)">
          编辑
        </a-button>
        <a-popconfirm title="确认要删除吗" @confirm="onMenuDelete(record.id)">
          <a-button type="danger" ghost>删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <a-modal v-model:visible="saveMenuVisible" :title="saveMenuTitle">
      <template #footer>
        <a-button key="back" @click="handleSaveMenuModalCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="saveMenuLoading" @click="handleSaveMenu">
          保存
        </a-button>
      </template>
      <a-form ref="saveMenuFormRef" :model="saveMenuForm" :rules="saveMenuRules">
        <a-form-item label="菜单名称" name="name">
          <a-input v-model:value="saveMenuForm.name" />
        </a-form-item>
        <a-form-item label="菜单编号" name="code">
          <a-input v-model:value="saveMenuForm.code" />
        </a-form-item>
        <a-form-item label="父级菜单" name="parentId">
          <a-tree-select
            v-model:value="saveMenuForm.parentId"
            tree-data-simple-mode
            :tree-data="dataSource"
            placeholder="选择父节点"
            :replace-fields="replaceFields"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="菜单路径" name="path">
          <a-input v-model:value="saveMenuForm.path" />
        </a-form-item>
        <a-form-item label="菜单图标" name="iconClass">
          <a-input v-model:value="saveMenuForm.iconClass" />
        </a-form-item>
        <a-form-item label="菜单权重" name="weight">
          <a-input-number v-model:value="saveMenuForm.weight" :min="1" :max="10000" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/runtime-core'
import { getTreeMenu, addMenu, removeMenu, updateMenu } from '@/api/system/menu'
import { ResMenuTree, MenuQuery, SaveMenu } from '@/model/system/MenuTree'
import { reactive, toRaw } from 'vue'
const columns = [
  { title: '菜单编码', dataIndex: 'code' },
  { title: '菜单名称', dataIndex: 'name' },
  { title: '菜单路径', dataIndex: 'path' },
  { title: '权重', dataIndex: 'weight' },
  { title: '创建时间', dataIndex: 'createTime' },
  {
    title: '操作',
    dataIndex: 'operation',
    slots: { customRender: 'operation' },
  },
]

export default defineComponent({
  name: 'Menu',
  setup() {
    // 查询
    const dataSource = ref<Array<ResMenuTree>>([])
    const menuQuery = reactive<MenuQuery>(new MenuQuery())
    const onQuery = async () => {
      dataSource.value = await getTreeMenu(toRaw(menuQuery))
    }
    onQuery()
    // 新增/修改
    const saveMenuVisible = ref<boolean>(false)
    const saveMenuLoading = ref<boolean>(false)
    const saveMenuTitle = ref<string>('')
    const saveMenuForm = reactive<SaveMenu>({
      id: 1,
    })

    const saveMenuFormRef = ref()

    const saveMenuRules = {
      name: [
        { required: true, message: '菜单名称必填', trigger: 'blur' },
        { min: 2, max: 50, message: '菜单名称长度3-10位', trigger: 'blur' },
      ],
      code: [
        { required: true, message: '菜单编号必填', trigger: 'blur' },
        { min: 2, max: 50, message: '菜单编号长度3-10位', trigger: 'blur' },
      ],
    }
    const replaceFields = {
      title: 'name',
      key: 'id',
      value: 'id',
    }
    const handleSaveMenuModalCancel = () => {
      saveMenuVisible.value = false
    }
    const handleSaveMenu = async () => {
      await saveMenuFormRef.value.validate()
      saveMenuLoading.value = true
      if (saveMenuForm.id == null) await addMenu(toRaw(saveMenuForm))
      else await updateMenu(toRaw(saveMenuForm))
      saveMenuLoading.value = false
      saveMenuVisible.value = false
      await onQuery()
    }
    const handleSaveMenuModalShow = (title: string, record: ResMenuTree) => {
      saveMenuForm.id = record.id
      saveMenuForm.code = record.code
      saveMenuForm.name = record.name
      saveMenuForm.parentId = record.parentId === 0 ? undefined : record.parentId
      saveMenuForm.weight = record.weight
      saveMenuForm.path = record.path
      saveMenuForm.iconClass = record.iconClass
      saveMenuTitle.value = title
      saveMenuVisible.value = true
    }
    const onMenuDelete = async (id: number) => {
      await removeMenu(id)
      await onQuery()
    }
    return {
      onQuery,
      columns,
      dataSource,
      menuQuery,
      saveMenuVisible,
      saveMenuTitle,
      handleSaveMenuModalCancel,
      saveMenuLoading,
      handleSaveMenu,
      saveMenuForm,
      saveMenuRules,
      handleSaveMenuModalShow,
      replaceFields,
      saveMenuFormRef,
      onMenuDelete,
    }
  },
})
</script>
<style></style>
